import React, { useState } from 'react';
import { Breadcrumb, PageHeader, Spin } from 'antd';
import ATag from '@/components/ATag';
import './style.less';

const PageRender = (props: any) => {
  const { list = [], title = '', loading = false, className = '' } = props;

  return (
    <Spin spinning={loading} wrapperClassName="PageRender-spin">
      <div className={`PageRender ${className}`}>
        <PageHeader
          className="PageRender-header"
          title={title}
          breadcrumb={
            <Breadcrumb>
              {list.map((item: any, index: number) => {
                return (
                  <Breadcrumb.Item key={index}>
                    <ATag type="text" href={item.href}>
                      {item.label}
                    </ATag>
                  </Breadcrumb.Item>
                );
              })}
            </Breadcrumb>
          }
        />

        <div className="PageRender-main">{props.children}</div>
      </div>
    </Spin>
  );
};

export default PageRender;
